<!--<template>-->
<!--    &lt;!&ndash; 单文件组件模板内容(单文件组件文件) &ndash;&gt;-->
<!--    <div>-->
<!--        单文件组件: {{ content }}-->
<!--        &lt;!&ndash; 使用导入的单文件组件 &ndash;&gt;-->
<!--        <Child1></Child1>-->
<!--        <Child2></Child2>-->
<!--    </div>-->
<!--</template>-->

<!--<script>-->
<!--    // 导入其他单文件组件(多组件嵌套使用)-->
<!--    import Child1 from './components/Child1.vue'-->
<!--    import Child2 from './components/Child2.vue'-->

<!--    // js内容-->
<!--    export default {-->
<!--        data: function () {-->
<!--            return {-->
<!--                content: 'hello world!'-->
<!--            }-->
<!--        },-->
<!--        // 将其他单文件组件添加到当前组件中-->
<!--        components: {-->
<!--            'Child1': Child1,-->
<!--            'Child2': Child2-->
<!--        }-->
<!--    }-->
<!--</script>-->

<!--<style scoped>-->
<!--   /* css样式 */-->
<!--</style>-->


<!--多组件路由使用-->
<template>
    <!-- 组件模板内容 -->
    <div>
        单文件组件：{{ content }}
        <!-- 在App.vue中指定路由标签-->
        <!-- 路由组件占位符,根据路由规则加载对应的组件内容(根据不同的path路径替换不同的单文件组件) -->
        <router-view></router-view>
    </div>
</template>

<script>
    // js内容
    export default {
        data: function () {
            return {
                content: 'hello world!'
            }
        }
    }
</script>

<style scoped>
   /* css样式 */
</style>